<template>
    <!-- 添加商品页 -->
    <div>
        <el-card class="box-card">
            <el-form :model="formData" label-position="left" label-width="100px" size="medium" @submit.native.prevent>
                <div class="static-content-item">
                    <div>基础信息</div>
                </div>
                <div class="static-content-item">
                    <el-divider direction="horizontal"></el-divider>
                </div>
                <el-row style="margin-top: 20px;">
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="货物编号" prop="item_code" class="required label-center-align">
                            <el-input v-model="formData.item_code" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="货物名称" prop="item_name" class="required label-center-align">
                            <el-input v-model="formData.item_name" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="状态" prop="inbill_state" class="required label-center-align">
                            <el-input v-model="formData.inbill_state" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="货物类型" prop="item_type" class="required label-center-align">
                            <el-input v-model="formData.item_type" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="类型编号" prop="item_type_code" class="required label-center-align">
                            <el-input v-model="formData.item_type_code" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="规格型号" prop="model_code" class="required label-center-align">
                            <el-input v-model="formData.model_code" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="单位" prop="unit" class="required label-center-align">
                            <el-input v-model="formData.unit" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="货品上限" prop="item_up" class="required label-center-align">
                            <el-input v-model="formData.item_up" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="货品下限" prop="item_down" class="required label-center-align">
                            <el-input v-model="formData.item_down" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="低于下限" prop="below_down" class="required label-center-align">
                            <el-input v-model="formData.below_down" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="高于下限" prop="above_up" class="required label-center-align">
                            <el-input v-model="formData.above_up" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="入库参考价" prop="inbill_price" class="required label-center-align">
                            <el-input v-model="formData.inbill_price" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="出库参考价" prop="outbill_price" class="required label-center-align">
                            <el-input v-model="formData.outbill_price" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                        <el-form-item label="排序" prop="sort_code" class="required label-center-align">
                            <el-input v-model="formData.sort_code" type="text" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <div class="static-content-item">
                <div>进货明细</div>
            </div>
            <div class="static-content-item">
                <el-divider direction="horizontal"></el-divider>
            </div>
            <div align="left">
                <el-button type="primary" align="right" @click="dialogVisible = true">添加</el-button>
                <el-button type="success" align="right">移除</el-button>
            </div>
            <el-dialog title="添加货品" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
                <div class="static-content-item">
                    <el-divider direction="horizontal"></el-divider>
                </div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline2">
                    <el-form-item class="Selected">
                        <el-input v-model="formInline.item_code" placeholder="请输入货品编号/名称" class="SInput"></el-input>
                    </el-form-item>
                    <el-form-item class="Selected">
                        <el-select v-model="formInline.unit" placeholder="请选择单位" class="SInput">
                            <el-option label="箱" value="箱"></el-option>
                            <el-option label="瓶" value="瓶"></el-option>
                            <el-option label="个" value="个"></el-option>
                            <el-option label="套" value="套"></el-option>
                            <el-option label="台" value="台"></el-option>
                            <el-option label="条" value="条"></el-option>
                            <el-option label="包" value="包"></el-option>
                            <el-option label="支" value="支"></el-option>
                            <el-option label="部" value="部"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false"
                            @click="cz()" style=" background-color: #79828a;color: #FFF;">重置</el-button>
                        <el-button class="custom-button" @click="select()">查询</el-button>
                    </el-form-item>
                    <template>
                        <el-table ref="multipleTable" :data="tableDataxz" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="id" label="序号" width="120">
                            </el-table-column>
                            <el-table-column prop="item_code" label="货品编号" width="120">
                            </el-table-column>
                            <el-table-column prop="item_name" label="货品名称" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="model_code" label="规格型号" width="120">
                            </el-table-column>
                            <el-table-column prop="unit" label="单位" width="120">
                            </el-table-column>
                            <el-table-column prop="inbill_price" label="入库单价" width="120">
                            </el-table-column>
                            <el-table-column prop="item_up" label="当前库存" width="120">
                            </el-table-column>
                        </el-table>
                        <el-pagination @size-change="handleSizeChangeo" @current-change="handleCurrentChangeo"
                            :current-page="currentPageo" :page-sizes="[3, 6, 9, 12]" :page-size="pageSizeo"
                            layout="total, sizes, prev, pager, next, jumper" :total="rows">
                        </el-pagination>
                    </template>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
                <div class="static-content-item">
                    <el-divider direction="horizontal"></el-divider>
                </div>
            </el-dialog>
            <el-form :model="input">
                <el-table ref="multipleTable" :data="Orderbuycx" tooltip-effect="dark" border show-summary
                    style="width: 1300px" @selection-change="handleSelectionChange" :model="input">
                    <el-table-column fixed type="selection" width="55">
                    </el-table-column>
                    <el-table-column fixed prop="id" label="编号" width="100">
                    </el-table-column>
                    <el-table-column fixed prop="item_name" label="货品名称" width="100">
                    </el-table-column>
                    <el-table-column fixed prop="item_code" label="货物编号" width="100">
                    </el-table-column>
                    <el-table-column fixed prop="model_code" label="规格型号" width="100">
                    </el-table-column>
                    <el-table-column prop="unit" label="单位" width="140">
                        <template slot-scope="scope">
                            <el-input placeholder="请输入" v-model="scope.row.dw" clearable />
                        </template>
                    </el-table-column>
                    <el-table-column prop="item_type" label="货品类型" width="120">
                    </el-table-column>
                    <el-table-column prop="inbill_num" label="当前库存" width="120">
                    </el-table-column>
                    <el-table-column prop="inbill_num" label="货品数量" width="150">
                        <template slot-scope="scope">
                            <el-input placeholder="请输入" v-model="input.hpsl" clearable />
                        </template>
                    </el-table-column>
                    <el-table-column prop="inbill_price" label="进货单价" width="150">
                        <template slot-scope="scope">
                            <el-input placeholder="请输入" v-model="input.jhdj" clearable />
                        </template>
                    </el-table-column>
                    <el-table-column prop="je" label="金额" width="120">
                        {{ input.hpsl * input.jhdj }}
                    </el-table-column>
                    <el-table-column prop="above_up" label="备注" width="160">
                        <template slot-scope="scope">
                            <el-input placeholder="请输入" v-model="input.bz" clearable />
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click="yc(scope.row)" type="text" size="small">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[3, 6, 9, 12]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="rows">
            </el-pagination>
            <div class="static-content-item">
                <el-divider direction="horizontal"></el-divider>
            </div>
        </el-card>
        <el-card class="box-card" >
            <div class="static-content-item">
                <div>上传附件</div>
            </div>
            <div class="static-content-item">
                <el-divider direction="horizontal"></el-divider>
            </div>
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <div class="static-content-item">
                <el-divider direction="horizontal"></el-divider>
            </div>
        </el-card>
        <div class="footer-nav">
            <el-row style="float: right;">
                <!-- 底部导航栏内容 -->
                <router-link to="Product information">
                    <el-button size="small">关闭</el-button>
                </router-link>
                <el-button size="small" @click="AddSupplier()">保存并新增</el-button>
                <el-button size="small" @click="Insertuser()" type="primary">保存</el-button>
            </el-row>
        </div>
    </div>
</template>

<script>
import $http from '../http/base.js'
export default {
    components: {},
    props: {},
    data() {
        return {
            //Item分页查询
            currentPage: 1,
            rows: 1,
            pageSize: 3,
            //Orderbuy分页查询
            currentPageo: 1,
            rowso: 1,
            pageSizeo: 3,
            Orderbuycx: [],
            dialogVisible: false,
            formData: {
                item_code: "",
                item_type_code: "",
                item_name: "",
                item_type: "",
                sort_code: '',
                inbill_state: '',
                model_code: "",
                outbill_price: "",
                inbill_price: "",
                item_up: '',
                item_down: '',
                below_down: "",
                above_up: "",
                unit: "",
                is_del: 0
            }, formInline: {
                item_code: "",
                unit: "",
            },
            input: {
                dw: "",
                hpsl: "",
                jhdj: "",
                bz: "",
                je: ""
            },
            tableDataxz: [],
            value1: '',
            value2: '',
            fileList: [{ name: 'food.jpeg', url: 'http://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
            { name: 'food2.jpeg', url: 'http://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
        }
    },
    computed: {},
    watch: {},
    
    created() { },
    mounted: function () {
        this.RandomID();
        this.Orderbuy();
        this.fill();
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        RandomID() {//生成随机供应商编码
            // 定义一个函数生成编码
            function generateCode() {
                const date = new Date();
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                const fixedLetters = 'PF';
                return fixedLetters + year + month + day + hours + minutes + seconds;
            }
            // 使用函数生成编码
            const randomCode = generateCode();
            console.log(randomCode); // 示例打印：20231129113510Y
            this.formData.item_code = randomCode
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        Insertuser() {
            $http.post('https://localhost:7020/api/BsItem/ItemAdd', this.formData)
                .then((res) => {
                    alert("新增成功！")
                    console.info(res)
                })
                .catch((err) => {
                    alert("新增失败！")
                    console.info(err);
                });
        }, toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {//固定列表
            this.multipleSelection = val;
            console.log(val);
        }, toggleSelection(rows) {//新增里的全选
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        }, cz() {//重置
            this.formInline.unit = "";
            this.formInline.item_code = "";
        },
        handleSizeChange(pageSize) {//分页
            this.pageSize = pageSize;
            this.currentPage = 1;
            console.log(this.pageSize);
            this.Orderbuy();
        },
        handleCurrentChange(currentPage) {//分页
            this.currentPage = currentPage;
            console.log(this.currentPage);
            this.Orderbuy();
        }, handleSizeChangeo(pageSizeo) {//Orderbuy分页
            this.pageSizeo = pageSizeo;
            this.currentPageo = 1;
            console.log(this.pageSizeo);
            this.fill();
        },
        handleCurrentChangeo(currentPageo) {//Orderbuy分页
            this.currentPageo = currentPageo;
            console.log(this.currentPageo);
            this.fill();
        }, fill() {
            var tj = "1=1";
            //模糊查询
            if (this.formInline.item_code != "") {
                tj +=
                    " and item_code like concat('%',concat('" + this.formInline.item_code + "','%')) or item_name like concat('%',concat('" + this.formInline.item_name + "','%'))";
            }
            if (this.formInline.unit != "") {
                tj +=
                    " and inbill_state like concat('%',concat('" + this.formInline.inbill_state + "','%'))";
            }
            const token = localStorage.getItem('token');
            $http.post("https://localhost:7020/api/BsItem/bs_Item_xz_FenYe?pageSize=" + this.pageSizeo + "&currentPage=" + this.currentPageo + "&str=" + tj + "")
                .then((res) => {
                    console.log(res.list);
                    this.tableDataxz = res.list;
                    this.rows = res.count;
                }).catch((err) => {
                    alert('错误1')
                    console.log(err);
                });
        }, 
        Orderbuy() {
            var tj = "1=1";
            const token = localStorage.getItem('token');
            $http.post("https://localhost:7020/api/BsItem/wh_Orderbuy_d_FenYe?pageSize=" + this.pageSize + "&currentPage=" + this.currentPage + "&str=" + tj + "")
                .then((res) => {
                    console.log(res.list);
                    this.Orderbuycx = res.list;
                    this.rows = res.count;
                }).catch((err) => {
                    alert('错误2')
                    console.log(err);
                });
        }
    }
}
</script>


<style scoped>
el-input
{
width: 200px;
    
}
.footer-nav {
    position: fixed;
    bottom: 0;
    right: 0px;
    height: 40px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    float: right;
}

.footer-nav a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
}

.footer-nav a:hover {
    color: #000;
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 100%;
    margin: auto;
}
</style>
<style scoped>
.el-input-number.full-width-input,
.el-cascader.full-width-input {
    width: 100% !important;
}

.el-form-item--medium {
    .el-radio {
        line-height: 36px !important;
    }

    .el-rate {
        margin-top: 8px;
    }
}

.el-form-item--small {
    .el-radio {
        line-height: 32px !important;
    }

    .el-rate {
        margin-top: 6px;
    }
}

.el-form-item--mini {
    .el-radio {
        line-height: 28px !important;
    }

    .el-rate {
        margin-top: 4px;
    }
}

.clear-fix:before,
.clear-fix:after {
    display: table;
    content: "";
}

.clear-fix:after {
    clear: both;
}

.float-right {
    float: right;
}
</style>

<style>
div.table-container {
    table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;

        td.table-cell {
            display: table-cell;
            height: 36px;
            border: 1px solid #e1e2e3;
        }
    }
}

.label-left-align ::v-deep .el-form-item__label {
    text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
    text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
    text-align: right;
}

.static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    ::v-deep .el-divider--horizontal {
        margin: 0;
    }
}

.Selected {
    display: inline-block;
}

.SInput {
    width: 190px;
}
</style>